<!-- 设置 -->
<template>
    <view>
        <view class="nav" :class="{'white': !toTop, 'color_22': toTop, 'bgwhite': toTop}">
            <view :style="{height: System.statusBarHeight + 'px'}"></view>
            <view class="p-left30" :style="{'line-height': navHeight + 'px'}">
                <text class="iconfont icon-xiangzuo size34 bold" @click="back()"></text>
                <text class="size34 bold m-left20">设置</text>
            </view>
        </view>
        <view class="p-re">
            <image :src="imgUrl + 'Uploads/private/set_bg.png'" mode="widthFix"></image>
            <view class="head p-ab text-center">
                <view class="p-re">
                    <u-avatar :src="$imgUrls(pageData.head_img)" size="70"></u-avatar>
                    <button open-type="chooseAvatar" class="btn-contact" @chooseavatar="chooseAvatar"></button>
                </view>
                <text class="label d-inline-block size26 white text-center m-top40">{{ pageData.group_name }}</text>
            </view>
        </view>
        <view class="p-left30 p-right30 p-top100">
            <view class="p-top20">
                <view class="size26 color_66">姓名</view>
                <u--input v-model="pageData.name" border="bottom" color="#333" :customStyle="{padding: '20rpx 0'}"></u--input>
            </view>
            <view class="p-top20">
                <view class="size26 color_66">外号</view>
                    <u-input v-model="pageData.nick_name" border="bottom" color="#333" :customStyle="{padding: '20rpx 0'}">
                        <template slot="suffix">
                            <view class="size22 color_99">客户查看销售客服时显示</view>
                        </template>
                    </u-input>
            </view>
            <view class="p-top20">
                <view class="size26 color_66">电话</view>
                    <u-input v-model="pageData.phone" border="bottom" color="#333" :customStyle="{padding: '20rpx 0'}">
                        <template slot="suffix">
                            <view class="size22 color_99">客户查看销售客服时显示</view>
                        </template>
                    </u-input>
            </view>
            <view class="p-top20">
                <view class="size26 color_66">销售宣言</view>
                    <u-input v-model="pageData.slogan" border="bottom" color="#333" :customStyle="{padding: '20rpx 0', border: 'none'}">
                        <template slot="suffix">
                            <view class="size22 color_99">客户查看销售客服时显示</view>
                        </template>
                    </u-input>
            </view>
        </view>
        <view class="divider"></view>
        <view class="padding40-30">
            <view class="d-flex j-sb a-center m-bot20">
                <view class="line40">
                    <text class="size34 color_22 bold">订阅通知</text>
                    <text class="size22 color_99 p-left30">通知需要扣除订阅次数</text>
                </view>
                <view>
                    <text class="size22 color_66">订阅次数 {{ pageData.notify_times }}</text>
                    <text class="size22 p-left30" style="color: #4F8FF8;" @click="handleSubscribe">获取</text>
                </view>
            </view>
            <view class="p-top20 p-bot20 p-left20 bor_bot_da d-flex j-sb" v-for="(item,index) in pageData.notice_config" :key="index">
                <view class="d-flex a-center">
                    <view class="size28 color_33 view200">{{ item.name }}</view>
                    <view class="size22 color_99">{{ item.timing }}</view>
                </view>
                <u-switch v-model="item.state" activeValue="1" inactiveValue="0" activeColor="#61EEC8" size="20"></u-switch>
            </view>
        </view>
        <view class="flexac p-top60 p-bot50">
            <view class="saveBtn size34 white text-center" @click="handleSave">保存</view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            toTop: false,
            pageData: ''
        }
    },
    computed: {
        ...mapState(['System', 'navHeight'])
    },
    onLoad(){
        this.initData()
    },
    methods: {
        initData(type){
            this.$http.get({
                url: '/PrivateSphereApi/getPrivateMember'
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                if(type == 'inc') return this.pageData.notify_times = res.data.notify_times
                this.pageData = res.data
            })
        },
        handleSave(){
            let { head_img, name, nick_name, phone, slogan, notice_config } = this.pageData
            let params = {
                head_img,
                name,
                nick_name,
                phone,
                slogan
            }
            notice_config.forEach(item=>{
                params[item.key] = item.state
            })
            console.log('params', params)
            this.$http.post({
                url: '/PrivateSphereApi/editPrivateMember',
                data: params
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.$Toast('设置成功')
                this.initData()
            })
        },
        chooseAvatar(e){
            let url = e.detail.avatarUrl
            this.$common.uploadFiles(url).then(res=>{
                if(res.errcode != 100) return this.$Toast('上传失败')
                this.pageData.head_img = this.$imgUrls(res.url.substring(22))
            })
        },
        incNotify(){
            this.$http.get({
                url: '/PrivateSphereApi/incNotify'
            }).then(res=>{
                console.log(res)
            })
        },
        handleSubscribe(){
            let that = this
            uni.requestSubscribeMessage({ // 调起订阅消息界面
                tmplIds: that.pageData.tmplId,
                success(res){
                    console.log(res)
                    if(res[that.pageData.tmplId[0]] == 'accept'){
                        that.incNotify()
                        that.initData('inc')
                    }
                }
            })
        }
    },
    onPageScroll(e){
        if(e.scrollTop > 100){
            this.toTop = true
        } else{
            this.toTop = false
        }
    }
}
</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
}
.head {
    top: 182rpx;
    left: 122rpx;
    .label {
        line-height: 50rpx;
        background: #4F8FF8;
        border-radius: 25rpx;
        padding: 0 30rpx;
    }
}
.divider {
    height: 20rpx;
    background: #F5F5F5;
}
.bor_bot_da {
    border-bottom: 1rpx solid #dadbde;
}
.view200 {
    width: 200rpx;
}
.saveBtn {
    width: 340rpx;
    line-height: 96rpx;
    background: #4CA0FF;
    border-radius: 14rpx;
}
</style>